import React, {Component} from 'react';
import {connect} from 'dva';
import moment from 'moment';
import {
  Row,
  Col,
  Card,
  Form,
  Input,
  Icon,
  Dropdown,
  Popover,
  InputNumber,
  DatePicker,
  message,
  Badge,
  Divider,
  Steps,
  Spin,
  Upload,
  Collapse, Empty,Cascader,
  Select, Button, Table, Modal
} from 'antd';
const { Panel } = Collapse;
const {MonthPicker, RangePicker} = DatePicker;
const Option = Select.Option;
const formItemLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 20 },
};
const FormItem = Form.Item;
import Class from '../upload.less'

@Form.create()
export default class CreateModal extends Component {
  state={
    fileList:[],
    confirmLoading: false,
  }
  render() {
    const {
      createModalVisible ,
      clseModal,
      createOnSubmit,
      page_type_list,
      form:{
        getFieldDecorator,
        getFieldValue
      }
    }= this.props;
    const file_type = getFieldValue("type");
    let file_postion = getFieldValue("position");
    const getWarnText = ()=>{
      let resolution = '';
      
      if(file_postion === 'main_header'){
        resolution = '475*1080'
      }else if (file_postion === 'main_footer'){
        resolution = '313*1080'
      }else {
        resolution = '370*1080'
      }
      return resolution
    }
    const onOk = e =>{
      e.preventDefault();
      this.props.form.validateFields((err, values) => {
        if (err) return
        console.log(values);
        this.setState({confirmLoading:true});
        if(values.file){
          values.file.parmsType = 'uploadFile';
          //values.imageContentFile.fileType = 'many';
        }else {
          this.setState({confirmLoading:false});
          message.error("请上传轮播图")
        }
        const _this = this;
        createOnSubmit(values,()=>{
          _this.setState({
            confirmLoading:false
          })
        });
      })
    }
    const fileProps = {
      listType:"picture",
      fileList : this.state.fileList,
      beforeUpload: file => {
        return false;
      },
      onChange : ({file,fileList})=>{
        if(fileList.length> this.state.fileList.length){ //如果改变的时候文件大于 state里的说明是新增
          const file = fileList[fileList.length - 1];
          const suffix = file.name.substring(file.name.lastIndexOf('.')+1);
          if(file_type === 'image'){
            if (!(suffix === 'jpg' ||  suffix === 'jpeg' || suffix === 'png')){
              message.error("请上传jpg或png类型文件!");
              return;
            }else if (file.size > 5242880) { //大于5m
              console.log("here");
              message.error("请上传小于5m的图片!");
              return;
            }
          }
         if (file_type === 'video'){
           if (!(suffix === 'mp4')){
             message.error("请上传mp4类型文件!");
             return
           }else if (file.size > 10485760){
             message.error("请上传小于10m的视频!");
             return
           }
         }
          this.setState({fileList:[file]})
        }else {
          this.setState({fileList:[]})
        }
      },
    }
    return (
      <Modal
        visible={createModalVisible}
        title="添加轮播图"
        onCancel={clseModal}
        destroyOnClose={true}
        maskClosable={false}
        confirmLoading={this.state.confirmLoading}
        width={`${document.body.clientWidth * 0.6}px`}
        onOk = {onOk}
      >
        <form layout="inline" >.
          <FormItem
            {...formItemLayout}
            label="幻灯片应用位置"
            required={true}
          >
            {getFieldDecorator('position', {
              //initialValue: modalType == 'update' ? this.props.updateData.template_name : undefined,
              validateTrigger: ['onChange', 'onBlur'],
              rules: [
                {
                  required: true,
                  message: '请选择幻灯片应用位置！',
                },
              ],
            })(
              <Select allowClear  placeholder="请选择"  style={{ width: '65%' }}>
                {
                  page_type_list.map((item)=>{
                    return  (
                      <Option key={item.value} value={item.value}>
                        {item.name}
                      </Option>
                    )
                  })
                }
              </Select>
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="幻灯片应用位置"
            required={true}
          >
            {getFieldDecorator('type', {
              //initialValue: modalType == 'update' ? this.props.updateData.template_name : undefined,
              validateTrigger: ['onChange', 'onBlur'],
              rules: [
                {
                  required: true,
                  message: '幻灯片类型！',
                },
              ],
            })(
              <Select onChange={()=>{
                this.setState({fileList:[]})
                console.log("22");
              }} allowClear  placeholder="请选择"  style={{ width: '65%' }}>
                <Option key="image" value="image">
                  图片
                </Option>
                <Option key="video" value="video">
                  视频
                </Option>

              </Select>
            )}
          </FormItem>
          {
            file_type?
              <FormItem
                {...formItemLayout}
                label="列表内容图片"
                required={true}
              >
                {getFieldDecorator('file', {
                  //initialValue: modalType == 'update' ? this.props.updateData.template_name : undefined,
                })(
                  <Upload {...fileProps}>
                    <Button>
                      <Icon type="upload" /> {this.state.fileList.length>0?'更换':'上传'}
                    </Button>
                    {
                       file_type === 'image' ?
                        <span style={{fontSize : 15,color:'red'}}> &nbsp;&nbsp;&nbsp;&nbsp;推荐使用高*宽{getWarnText()}或按此比例等比缩放的分辨率)</span> :[]
                    }
                    {
                       file_type === 'video' ?
                        <span style={{fontSize : 15,color:'red'}}> &nbsp;&nbsp;&nbsp;&nbsp;推荐使用高*宽{getWarnText()}或按此比例等比缩放的分辨率)</span>:[]
                    }
                  </Upload>
                )}
              </FormItem>
              :

              []
          }
        </form>
      </Modal>
    )

  }
}